<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src='/_ah/channel/jsapi'></script>
<link rel="stylesheet"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css">
<link rel="stylesheet"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/resources/claroGrid.css">
<script
	src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
	data-dojo-config="isDebug: true, async: true">
		</script>
<link rel="stylesheet"
	href="<c:url value='/static/css/stakestyles.css' />">


<style type='text/css'>
body {
	font-family: 'Helvetica';
}

#board {
	width: 152px;
	height: 152px;
	margin: 20px auto;
}

#display-area {
	text-align: center;
}

#this-game {
	font-size: 9pt;
}

#winner {
	
}

table {
	border-collapse: collapse;
}

td {
	width: 50px;
	height: 50px;
	font-family: "Helvetica";
	font-size: 16pt;
	text-align: center;
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
}

div.cell {
	float: left;
	width: 50px;
	height: 50px;
	border: none;
	margin: 0px;
	padding: 0px;
}

div.mark {
	position: absolute;
	top: 15px;
}

div.l {
	border-right: 1pt solid black;
}

div.c {
	
}

div.r {
	border-left: 1pt solid black;
}

div.t {
	border-bottom: 1pt solid black;
}

div.m {
	
}

div.b {
	border-top: 1pt solid black;
}
</style>

</head>
<body>

	<script type='text/javascript'>
    		
    </script>
	<div id='display-area'>
		<h2>Channel-based Tic Tac Toe</h2>
		<div id='other-player' style='display: none'>
			Waiting for another player to join.<br> Send them this link to
			play:<br>
			<div id='game-link'>
				<a href='{{ game_link }}'>{{ game_link }}</a>
			</div>
		</div>
		<div id='your-move' style='display: none'>Your move! Click a
			square to place your piece.</div>
		<div id='their-move' style='display: none'>Waiting for other
			player to move...</div>
		<div id='you-won'>You won this game!</div>
		<div id='you-lost'>You lost this game.</div>
		<div id='board'>
			<div class='t l cell'>
				<table>
					<tr>
						<td id='0'></td>
					</tr>
					</td>
				</table>
			</div>
			<div class='t c cell'>
				<table>
					<tr>
						<td id='1'></td>
					</tr>
					</td>
				</table>
			</div>
			<div class='t r cell'>
				<table>
					<tr>
						<td id='2'></td>
					</tr>
					</td>
				</table>
			</div>
			<div class='m l cell'>
				<table>
					<tr>
						<td id='3'></td>
					</tr>
					</td>
				</table>
			</div>
			<div class='m c cell'>
				<table>
					<tr>
						<td id='4'></td>
					</tr>
					</td>
				</table>
			</div>
			<div class='m r cell'>
				<table>
					<tr>
						<td id='5'></td>
					</tr>
					</td>
				</table>
			</div>
			<div class='b l cell'>
				<table>
					<tr>
						<td id='6'></td>
					</tr>
					</td>
				</table>
			</div>
			<div class='b c cell'>
				<table>
					<tr>
						<td id='7'></td>
					</tr>
					</td>
				</table>
			</div>
			<div class='b r cell'>
				<table>
					<tr>
						<td id='8'></td>
					</tr>
					</td>
				</table>
			</div>
		</div>
		<div id='this-game' float='top'>
			test send/receive : <span id='this-game-link'><a
				href='javascript:void(0)' onclick="javascript:sendMessage()">here</a>
			</span>
		</div>
	</div>
</body>
</html>